<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="renderer" content="webkit" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
	<title>千锋教育大前端Vue教学</title>
	<!-- 引入vue -->
	<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
</head>

<body style="margin:100px;font-size:22px;">
	<div id="app">
		<!-- 文本插值 -->
		<div>{{ msg }}</div>
		<!-- js表达式 -->
		<div>{{ number + 1 }}</div>
		<div>{{ flag ? 'ok': 'no' }}</div>
		<div>{{ message.split('').reverse().join('') }}</div>
	</div>
	<script>
		// 创建引用
		const app = Vue.createApp({
			data() {
				return {
					msg: 'hello vue',
					number: 100,
					flag: true,
					message: 'hello world',
				}
			}
		});
		app.mount('#app');
	</script>
</body>

</html>